
<template>
  <div id="container"></div>
</template>

<script setup>
import {onMounted, onUnmounted, ref} from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";
import axios from "axios";

let map = null;

onMounted(() => {
  getDriverPosition();
  window._AMapSecurityConfig = {
    securityJsCode: "161e0eb64da56fd91bbfbe1c2e1b3b19",
  };
  AMapLoader.load({
    key: "17dc6b2bc129d1b8dc41bd027a30d8da", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
  })
      .then((AMap) => {
        map = new AMap.Map("container", {
          // 设置地图容器id
          viewMode: "3D", // 是否为3D地图模式
          zoom: 8, // 初始化地图级别
          pitch: 45,//角度
          center: [116.397428, 39.90923], // 初始化地图中心点位置
        });
        //添加标记
        for (const i in driverPositions) {
          getPosition(driverPositions[i].position, driverPositions[i].driverName);
        }
      })
      .catch((e) => {
        console.log(e);
      });
});
onUnmounted(() => {
  map?.destroy();
});


//添加标记
let addMarker = (position, driverName) => {
  const infoWindow = new AMap.InfoWindow({
    //创建信息窗体
    isCustom: true, //使用自定义窗体
    content: driverName, //信息窗体的内容可以是任意html片段
    offset: new AMap.Pixel(16, -45),
  });
  const onMarkerClick = function (e) {
    infoWindow.open(map, e.target.getPosition()); //打开信息窗体
    //e.target就是被点击的Marker
  };
  const marker = new AMap.Marker({
    position: position,
  });
  map.add(marker);
  marker.on("click", onMarkerClick); //绑定click事件
}
let position; // 这里不需要初始化为空字符串，可以初始化为undefined或者null
// 地理位置编码
const getPosition = (driverPosition, driverName) => {
  axios({
    url: "https://restapi.amap.com/v3/geocode/geo",
    method: "get",
    params: {
      key: "4decff4600b71b61f564bc330f4d4a08", // 请确保这是您的高德地图API密钥
      address: driverPosition,
    }
  }).then((res) => {
    console.log("zhhuangtai" + res.data.geocodes[0].location);
    const [lng, lat] = res.data.geocodes[0].location.split(','); // 分解经纬度
    position = [parseFloat(lng), parseFloat(lat)]; // 转换为数组并赋值给position
    console.log("高德位置信息:", position); // 输出：高德位置信息: [116.405465, 39.914694]
    addMarker(position, driverName);
  })
}
//司机位置列表
const driverPositions = [];


// 获得位置信息
const getDriverPosition = () => {
  axios({
    url: "http://localhost:8080/deliver/selectDriving",
    method: "get",
    params: ""
  }).then((res) => {
    console.log(res.data.data);
    for (const i in res.data.data) {
      const deliver = {
        position: "",
        driverName: ""
      }
      deliver.position = res.data.data[i].position;
      deliver.driverName = res.data.data[i].driverName;
      driverPositions.push(deliver);
    }
    console.log(driverPositions);
  })
}


let canvas = document.createElement('canvas');
canvas.willReadFrequently = true; // 这里设置了willReadFrequently属性
</script>

<style scoped>
#container {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100vh; /* 使用 100vh 来确保容器占据整个视口的高度 */
}
</style>